<template>
  <div class="box">
    <div class="innerBox">
      <van-tabs v-model="labelClass" style="width: 100vw;height: auto">
        <van-tab title="题目">

        </van-tab>
        <van-tab title="答案">

        </van-tab>
      </van-tabs>
      <template v-if="online">

        <div style="overflow-y: auto" v-if="labelClass==0" v-html="anwit.itemBank&&anwit.itemBank.testItemContent">
        </div>
        <div style="overflow-y: auto"  v-else v-html="anwit.answer">
        </div>
      </template>
      <template v-else>
        <el-image v-if="labelClass==0" :preview-src-list="[detail.questionPicture,detail.answerPicture]"
                  :src="detail.questionPicture" alt="" fit="contain"></el-image>
        <el-image v-else :preview-src-list="[detail.questionPicture,detail.answerPicture]"
                  :src="detail.answerPicture" alt="" fit="contain"></el-image>
      </template>

      <div>
        <el-form ref="form" :model="form" class="elForm"  label-width="80px">
          <el-form-item label="考生">
            {{ detail.reserve3 }}
          </el-form-item>
          <el-form-item label="答案">
            {{detail.result=='yes'?'正确':'错误'}}

          </el-form-item>


        </el-form>

      </div>


      <div style="padding: 10px;width: 100vw">


        <div class="item">
          <div class="content">
            <div v-for="item in count" class="itemInner">
              <div>
                {{ item.questionTypeName }}
              </div>
              <div>
                <el-radio v-model="item.isNo" disabled label="yes"
                >选项没问题了
                </el-radio
                >
                <el-radio v-model="item.isNo" disabled label="no"
                >我对这个选项有疑问
                </el-radio
                >
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="teacher">
        <el-form style="width: 100%" inline>
          <el-form-item label="老师备注">{{ detail.teacherRemarks }}</el-form-item>
        </el-form>


      </div>
      <div id="bottomImage" style="text-align: center;width: 100vw ">
        <el-image v-if="detail.teacherPicture" :preview-src-list="[detail.teacherPicture]" :src="detail.teacherPicture"
                  fit="contain"></el-image>


      </div>
<!--      <el-button style="height: 50px;" @click="setVisibles">进入答疑区</el-button>-->
      <div style="width: 100vw;" id="messageScllTo">
        <template v-for="item in messageListData">
          <div class="messageRight" v-if="item.reserve1=='学生'">
            <div>
              <div style="display:flex;">

                <div>{{ item.createTime }}</div>
                <div style="margin-left: 10px">{{ item.replierUser.userName }}</div>
              </div>
              <div>
                <div>{{ item.replyContent }}</div>
              </div>
            </div>
            <div style="padding: 10px 10px 10px 0">
              <el-avatar :size="30" :src="item.replierUser.avatar" @error="errorHandler">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
              </el-avatar>
            </div>
          </div>
          <div class="messageLeft"  v-if="item.reserve1=='老师'">
            <div style="padding: 10px 0 10px 10px">
              <el-avatar :size="30" :src="item.replierUser.avatar" @error="errorHandler">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
              </el-avatar>
            </div>
            <div>
              <div style="display:flex;">
                <div style="margin-right: 10px">{{ item.replierUser.userName }}</div>
                <div>{{ item.createTime }}</div>
              </div>
              <div>
                <div>{{ item.replyContent }}</div>
              </div>
            </div>

          </div>
        </template>
        <el-input  v-model="form.replyContent" :rows="4" placeholder="请输入内容" style="width: 100%;margin-top: 20px;padding: 10px"
                  type="textarea"></el-input>
        <div style="display: flex;justify-content: flex-end;padding: 10px;width: 100%">
          <el-button type="primary" @click="submit">提交</el-button>
        </div>

      </div>

    </div>

  </div>
</template>
<script>
import {
  addPaperMarkingQA,
  base64ToUrl, getOnlineStudentAnswerDetail,
  getPaper,
  getPaperMarking,
  getPaperMarkingQA,
  teacherMarkPaper
} from "@/api/markingPapers";
import {listUser} from "@/api/system/user";
import {mapGetters} from "vuex";

export default {

  props: {
    id: {
      type: String,
    }
  },
  data() {
    return {
      detail: {},
      activeName: 'one',
      form: {
        replyContent: ''

      },
      userList: [],

      condition: [],
      index: null,
      typeTreeData: [],
      visibles: false,
      temporaryArray: null,
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },
      questionType: [],
      count: [],
      upImg: null,
      //弹框学情分析
      learnAnalyzePictures: '',
      options: [],
      labelClass: 'js',
      messageListData:[],
      online:false,
      anwit:{}
    }
  },
  mounted() {
    // this.getListData()
    this.getMessageData()

    if(this.$route.query.type=='onLine'){
      this.getOnLineListData()
      this.online=true
    }else{
      this.getListData()

    }


  }
  ,
  computed: {
    ...mapGetters(["baseUrl", 'userId','rolesId']),
  },
  watch: {
    visibles: function (n, o) {
      if (!n) {
        this.temporaryArray = [];
      }
    },
  },
  updated() {
    //判断是否初始配置，若无则配置。
    if (!this.mathJax.isMathjaxConfig.bool) {
      this.mathJax.initMathjaxConfig();
    }
    this.$nextTick((_) => {
      //传入组件id，让组件被MathJax渲染
      this.mathJax.MathQueue("questionList-page");
    });
  },
  methods: {
    getListData() {
      getPaperMarking(this.$route.query.id).then(res => {
        this.detail = res.data
        this.count = res.data.jobTestPaperAndLabelList
      })
    },
    getOnLineListData(){
      getOnlineStudentAnswerDetail(this.$route.query.id).then(res => {
        this.detail = res.data
        this.anwit=res.data.studentTestAnswer
        this.count = res.data.jobTestPaperAndLabelList
      })
    },
    async getUserList() {
      let obj = {
        pageSize: 999,
        pageNum: 1,
      };
      await listUser(obj).then((res) => {
        if (res.code == 200) {
          this.userList = res.rows;
        }
      });
    },
    getMessageData() {
      getPaperMarkingQA(this.$route.query.id).then(res => {
        this.messageListData = res.rows
      })
    }
    ,
    submit() {
      this.form['jobTestPaperId'] = this.id
      this.form['replierId']=this.userId
      this.form['responderId']=this.rolesId.indexOf(102)>0?this.detail.teacherId:this.detail.studentId
      this.form['reserve1']=this.rolesId.indexOf(102)>=0?'学生':'老师'
      console.log(this.form)
      console.log(this.form)

      addPaperMarkingQA(this.form).then(res => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          this.getMessageData()
          this.form.replyContent=''
        }
      })

    },


    //提交阅卷
    //生成试卷
    generateTestPapers() {
      if (this.form.topicTag == "") {
        this.$message.warning("请选择要生成试题的标签");
        return;
      }
      console.log(this.form)

      teacherMarkPaper(this.form).then(res => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          this.$router.back(1)
        }
      })
    },
    errorHandler() {
      return true
    },
    setVisibles(){
      this.visibles=true

    },
    scollTo(){
      console.log('打开的回调')
      let box=document.querySelector('#messageScllTo')
      console.log(box)
      let scollHeight=box.scrollHeight
      box.scrollTo({
        top:scollHeight,
        behavior:'smooth'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  min-width: 1000px;

  .innerBox {
    height: 100%;
    //display: flex;
    overflow: auto;

    > .left {
      flex: 1;
      border-right: 1px solid #000;
      padding: 10px;
      box-sizing: border-box;

      > .content {
        height: 100%;
        display: flex;
        flex-direction: column;

      }


    }

    > .right {
      flex: 1;
      display: flex;
      flex-direction: column;








      > .bottom {
        padding: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;

        > .title {
          font-size: 16px;
          font-weight: bold;
          text-align: center;
        }

      }


    }

  }
}

.elForm {
  height: calc(100% - 130px);

  > div:nth-of-type(1) {
    margin-top: 20px;
  }
}


.dialogAddTree {
  ::v-deep .el-dialog {
    min-width: 1070px;
  }

  .diaRight {
    flex: 1;
    overflow: auto;
    width: 100%;
    max-height: 800px;
    position: relative;

    .el-tree {
      width: max-content;
    }

    .label {
      display: none !important;
    }

    .custom-tree-node {
      display: flex;
      align-items: center;
    }

    .is-current {
      > .el-tree-node__content {
        .label {
          display: block !important;
        }
      }
    }
  }
}
.el-image{
  width: 100vw;
}



.item {
  min-height: 100px;
  border: #f1f3f8 1px solid;
  margin-bottom: 15px;
  padding: 5px;
  font-size: 14px;

  > div:nth-of-type(1) {
    font-size: 16px;
  }

  > .content {
    .itemInner {
      padding: 10px 0;
      display: flex;
      flex-direction: column;
      border-bottom: 1px #f1f3f8 solid;
      margin-bottom: 15px;

      > div:nth-of-type(1) {
        align-self: flex-start;
        margin-bottom: 10px;
      }

      > div:nth-of-type(2) {
        ::v-deep .el-radio__label {
          font-size: 12px;
        }
      }
    }
  }
}
.teacher {
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-direction: column;


  > div {
    width: 100px;
    text-align: center;
  }

  .teacherBottom {
    height: 100%;
    background-color: red;

  }
}



  .messageRight{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    >div{
      padding: 10px;
      text-align: right;
    }
  }
  .messageLeft{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    >div{
      padding: 10px;
      text-align: left;
    }
  }

</style>
